<template>
    <div class="loginContainer">
        <el-button plain type="text" style="position:absolute;left:20px;top:20px;font-size:18px;"
            @click="back">返回</el-button>
        <div class="formBOX">
            <div style="font-size:20px;font-weight:600;margin-bottom:20px;">注册</div>
            <el-form ref="rForm" :model="loginForm" status-icon label-width="120px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="loginForm.userName" type="text"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="passWord">
                    <el-input v-model="loginForm.passWord" type="passWord"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="send">发送</el-button>
                    <el-button type="primary" @click="back">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="返回数据"></div>
    </div>
</template>
<!-- 接口测试 -->
<script lang="ts" setup>
import { ref } from 'vue'
import { registerAccount } from '/@/api/login'
import { ElMessage } from 'element-plus'


const loginForm = ref({
    userName: "zhl",
    passWord: "asd123.",
})

const send = async () => {
    if (!loginForm.value.userName || !loginForm.value.passWord) {
        ElMessage({
            message: '请先完善登录账号和密码',
            type: 'error',
        })
        return
    }
    const getData: any = await registerAccount(loginForm.value)
    if (getData.code == 200) {
        ElMessage({
            message: '注册成功！',
            type: 'success',
        })
        loginForm.value = {
            userName: "",
            passWord: "",
        }
    }
}
const back = async () => {
    // window.history.back()
    //    const getData: any = await mokeGet({})
    //     if (getData.code == 200) {
    //         ElMessage({
    //             message: '添加成功！',
    //             type: 'success',
    //         })

    //     }

}
</script>
<style lang="scss" scoped>
.loginContainer {
    height: 100vh;
    width: 100vw;
    padding: 60px;
    margin-bottom: 10px;
    cursor: pointer;
}

.loginTitle {
    margin: 20px auto;
}

.formBOX {
    width: 80%;
}

.loginBtn {
    line-height: 1;
    min-height: 40px;
    white-space: nowrap;
    cursor: pointer;
    background-color: #409EFF;
    border: none;
    color: #fff;
    appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
}
</style>
